//
// LESS CSS rules (see http://lesscss.org/)
//

// Variables ----------------------------------------------

@img:				"/";

// Base Colors
@blue:				#0058aa;
@twitter:			#049CDB;
@blueDark:			#0064CD;
@green:				#46a546;
@red:				#9d261d;
@yellow:			#ffc40d;
@orange:			#f89406;
@pink:				#c3325f;
@purple:			#7a43b6;
@facebook:			#304984;
@sova:				#BED632;
@gay:				#FF0080;
@okurka:			#7CAE15;
@toxic:				#86F716;

// Grays
@black:				#000;
@grayDark:			lighten(@black, 25%);
@gray:				lighten(@black, 50%);
@grayLight:			lighten(@black, 75%);
@grayLighter:		lighten(@black, 90%);


// DEFINE SECTION, always edit, please
	@baseColor:			#2EA3CC; // base color for whole web
	@bodyColor:			#ffffff; // background
	
	@linkColor:			white;
	@linkColorHover:	darken(@linkColor, 15);

	@mainRadius:		3px;

	// txt
	@txtContentColor:	#272727; // common text
	@baseFont:			12px;
	@baseLine:			14px;

	// Typical Grid for mobile
	//@gridColumns:		6;
	//@gridColumnWidth:	44px;
	//@gridGutterWidth:	8px;
	//@siteWidth:		(@gridColumns * @gridColumnWidth) + ((@gridColumns + 1) * @gridGutterWidth); // 320px

	// Typical Grid for desktop
	@gridColumns:		16;
	@gridColumnWidth:	50px;
	@gridGutterWidth:	10px;
	//@siteWidth:			(@gridColumns * @gridColumnWidth) + ((@gridColumns + 1) * @gridGutterWidth); // 970px
	@siteWidth:			60%;




@complement:		spin(@baseColor, 180);  // Determine a complementary color
@split1:			spin(@baseColor, 158);  // Split complements
@split2:			spin(@baseColor, -158);
@triad1:			spin(@baseColor, 135);  // Triads colors
@triad2:			spin(@baseColor, -135);
@tetra1:			spin(@baseColor, 90);   // Tetra colors
@tetra2:			spin(@baseColor, -90);
@analog1:			spin(@baseColor, 22);   // Analogs colors
@analog2:			spin(@baseColor, -22);


// Mixins -------------------------------------------------
@import "mixins.less";

// Colors debug
.cx { background-color: @baseColor !important; }
.c0 { background-color: @complement !important; }
.c1 { background-color: @split1 !important; }
.c2 { background-color: @split2 !important; }
.c3 { background-color: @triad1 !important; }
.c4 { background-color: @triad2 !important; }
.c5 { background-color: @tetra1 !important; }
.c6 { background-color: @tetra2 !important; }
.c7 { background-color: @analog1 !important; }
.c8 { background-color: @analog2 !important; }

// Grid
.grid {
	.clearfix;
	.span1 { .columns(1); }
	.span2 { .columns(2); }
	.span3 { .columns(3); }
	.span4 { .columns(4); }
	.span5 { .columns(5); }
	.span6 { .columns(6); }
	.span7 { .columns(7); }
	.span8 { .columns(8); }
	.span9 { .columns(9); }
	.span10 { .columns(10); }
	.span11 { .columns(11); }
	.span12 { .columns(12); }
	.span13 { .columns(13); }
	.span14 { .columns(14); }
	.span15 { .columns(15); }
	.span16 { .columns(16); }
	&.show-grid {
		height: 200px;
		margin-bottom: 20px;
		div, a {
			.bgc(red);
			min-height: 200px;
		}
	}
}

.spc {
	padding: @gridGutterWidth;
}

.todo {
	.c(red);
	.border(red);
	margin: 5px;
}

//
// LAYOUT RULES
// ------------

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

// General rules
body {
	.reset;
	.bgc(silver);
	.bgi("bg-layer.png", repeat);
	.c(@txtContentColor);
	#font > .sans-serif; // using sans-serif family font with baseFont and baseLine
}

h1 {
	.c(@baseColor);
}


// links

a {
	.tdu;
	outline: none;
	.c(@linkColor);
}

a:hover {
	.tdu;
	color: @linkColorHover;
}


// tables

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

section { .clearfix; }


// forms
input {
	.box-shadow(inset 0 0 5px darken(@grayLight, 10%));
	.border(gray);

	&:focus {
		outline: blue;
	}	
}


.hidden { display: none; }
.cleaner { clear: both; }




// Specific Rules

#page { 
	.center-block; 
	
	#fold {
	
	} // #fold

	.left {
		.fl;
		width: 20%;
		
	}

	.right {
		.fr;
		width: 80%;
	}
} // #page



// Header
header.main {
	.clearfix;

	#user-status {
		.fr;
		
		a {
			.fl;
			.btn(@baseColor, white, 0 1px 1px, 15px, 2px 12px, 0);
			margin: 9px 0;
			border-right: 1px solid darken(@baseColor, 25%);
			

			&.btn-first {
				.radius-top-left(6px);
				.radius-bottom-left(6px);
				
			}

			&.btn-last {
				.radius-top-right(6px);
				.radius-bottom-right(6px);
				border-right: none;
			}
		}

		
	}
	
} // header.main


nav.main {
	position: fixed;
	top: 56px;

	ul {
		.reset;

		li {
			.reset;

			a {
				.tdn;
				.btn(@baseColor, white, 0 1px 1px, 15px, 20px 10px, 6px);
				.tac;
				margin-top: 10px;
				width: 100px;

				&.btn-home {
					padding: 10px;
				}
			}
		}
	}
}


#homepage {
	h1 {
		.tac;
		.fs(24px);
	}

	h2 {
		margin-top: 20px;
	}

	label {
		display: inline-block;
		width: 100px;
	}

	input {
		.bgc(white);
		padding: 2px;
		margin: 1px;
		width: 100px;

		&.home-main-button {
			margin-left: 4px;
			margin-top: 10px;
			width: 104px;
		}
	}

	.generatorLink {
		.btn(#f5f5f5, #333, 0 1px 1px, 13px, 9px 15px 10px, 6px);
		text-shadow: 0 1px 1px white;
		.ttu;	
		.tac;
		width: 160px;
		display: block;
		margin: 60px auto;
	}

}

#generatePage {
	padding: 20px;

	label {
		width: 100px;
		margin-top: 15px;
		display: inline-block;
	}

	input {
		height: 20px;
		padding-left: 4px;
		margin-top: 10px;
		width: 88px;
	}

	.generator-main-button {
		.btn(#f5f5f5, #333, 0 1px 1px, 13px, 9px 15px 10px, 6px);
		.tac;
		text-shadow: 0 1px 1px white;
		height: auto;
		width: 100px;
	}
}

#teacherPage, #lessonPage { 

	ul {
		.reset;
		padding-top: 15px;

		li {
			.reset;
			padding-bottom: 5px;

			span.label {
				.fwb;
				display: inline-block;
				width: 110px;
			}
		}
		
	}

	#expand-457 {
			.fs(12px);
			display: inline !important;
			.tdu;
			.fwn;
			cursor: pointer;
	}


	.mini-list {

		span.time, 
		div.teacher {
			display: none;
		}
		
		
		
		.box-content-l {
			padding: 2px;
			
			span.date {
				position: relative;
				top: 4px;
				.fs(14px);
			}
		}

		.box-content-r {
			padding: 10px;
		}
			
		.lesson-box,
		.box-content {
			height: auto;

			h3 {
				padding-bottom: 5px;
			}
		}
	}
}



#changeStudentPage, #teacherPage {
	.avatar {
		.radius(7px);
		.fl;
		margin-right: 15px;
		margin-left: 1px;
		margin-top: 10px;
	}


	form.student {
		label {
			width: 120px;
			display: inline-block;
			margin-top: 15px;
		}

		input {
			.bgc(white);
			padding-left: 4px;
			width: 412px;
			height: 25px;
		}

		.form-l {
			.fl;
		}

		.main-button {
			width: 200px;
			height: 40px; 
			margin: 37px;
			margin-top: 20px;
			.btn(#f5f5f5, #333, 0 1px 1px, 13px, 9px 15px 10px, 6px);
			text-shadow: 0 1px 1px white;
		}
	}
}


.content_container {
	.bgi("bg-content.png", repeat);
	.box-shadow(0 2px 3px rgba(0,0,0,.4));
	.c(white);
	min-height: 400px;
	padding: 15px;

	input.main-button {
		.fr;
		.bgc(white);
		.radius(2px);
		.border(gray);
		.fs(13px);
		.ttu;
		.fwb;
		margin: 10px 5px;
		padding: 5px 7px;
		height: 40px;
		cursor: pointer;
	}


	table {
		td {
			padding: 2px;
		}
		
		tr:hover {
			.bgc(white);
			.c(#333);
		}
	}



	// new boxes
	.course-box-new, .lesson-box-new {
		.bgc(silver);
		.radius(3px);
		.c(#333);
		.clearfix;
		margin-top: 10px;
		width: 99%;
		display: block;
		.border(#f2f2f2);

		input {
			padding-left: 5px;
			height: 20px;
			line-height: 20px;
			margin-bottom: 5px;

			&.main-button {
				height: 53px;
				margin-top: 22px;
				margin-bottom: 0;
				padding: 17px 20px;
			}
		}

		select {
			.bgc(white);
			.border(gray);
			height: 50px;
			width: 420px;
		}


		@margin-top: 8px;
		.box-content-l {
			.fl;
			display: inline-block;
			width: 80px;
			margin: @margin-top 5px;

			input {
				width: 70px;
			}
		}

		.box-content-r {
			.fr;
			margin: @margin-top 5px;
		}

		.box-content {
			.fl;
			display: block;
			height: 88px;
			width: 60%;
			margin-top: @margin-top;

			a {
				.c(black);

				&:hover {
					.c(@gray);
				}
			}

			input {
				width: 99%;
			}
		}
	}

	.lesson-box-new {
		padding: 20px;
		width: 93%;

		input.main-button {
			margin-top: 0px;
		}
	}



	// standard box
	.lesson-box, .course-box, .students-box {
		.bgc(white);
		.radius(3px);
		.c(#333);
		.clearfix;
		margin-top: 10px;
		width: 99%;
		display: block;

		&:hover {
			.box-content-l {
				.gradient(silver, darken(silver, 40%));
			}

			.box-content-r {
				.gradient(@baseColor, darken(@baseColor, 25%));
			}
		}

		.box-content-l {
			.tac;
			.c(white);
			.fwb;
			.gradient(silver, darken(silver, 20%));
			.radius(3px);
			.fs(17px);
			.fl;
			margin: 5px;
			display: inline-block;
			width: 80px;
			padding: 20px 0;
			line-height: 20px;
			text-shadow: 0 1px 1px darken(#333, 50%);
			min-height: 30px;
			.box-shadow(0 1px 1px);


			.date {
				margin-left: 2px;
				.fs(20px);
			}

			.time {
			}

			.nativlang {
				.fs(22px);
				position: relative; 
				top: 7px;
			}
		}

		.box-content {
			.fl;
			.c(#333);	
			display: block;
			height: 80px;
			width: 70%;
			

			a {
				.c(black);

				&:hover {
					.c(@gray);
				}
			}
		
			h3 {	
				.reset;
				.ttu;
				.fs(16px);
				.fl;
				margin-top: 15px;
				line-height: 1.3;
			}

			.teacher, .student {
				.c(#333);
				clear: both;
				padding-top: 10px;	
				display: block;
			}
		}

		.box-content-r {
			.fr;
			.gradient(@baseColor, darken(@baseColor, 15%));
			.radius(3px);
			.tac;
			padding: 34px 5px;
			margin: 5px;

			input {
				.bgc(white);
			}
		}

	}



	

}








// Footer
footer.main {
	.clearfix;
	clear: both;

	@footer-radius: 6px;
	.radius-top-left(@footer-radius);
	.radius-top-right(@footer-radius);
	.bgc(@baseColor);	
	.box-shadow(0px 0px 4px rgba(0,0,0,.4));
	.tac;
	.c(white);
	height: 200px;
	margin-top: 20px;
	padding: 15px;

	.copy {
		.fl;
	}

	.author {
		.fr;
	}
} // footer.main




// ===========
// = Helpers =
// ===========



// centered pagination
@margin-top-bottom: 20px;
div.pagination {
	display: table;
	margin: @margin-top-bottom auto;
	
	ul {
		.reset;
		display: table-row;

		li {
			.reset;
			.fl;
			margin: 0 5px;
		}
	}
}



@media screen and (max-width: 1440px) {
	#page {
		width: 90% !important;
	}
}


@media screen and (max-width: 825px) {
	.lesson-box-content {
		width: 70% !important;
	}
}